<template>
  <div style="display: flex; height: 52px; width: 400px; align-items: center; justify-content: end">
    <div style="display: flex">
      <div v-if="userStore().info" @click="showUserDetail" style="cursor: pointer">
        <Avatar :src="userStore().info.avatarUrl" icon="ios-person" class="header_right_avater" />
        <span style="margin-left: 10px">{{ userStore().info.userName }}({{ userStore().info.workNo }})</span>
      </div>
      <!-- <span @click="downloadShow" class="download-icon">
        <Badge dot :count="hasUnread ? 1 : 0">
          <Icon type="md-arrow-down" />
        </Badge>
      </span> -->
    </div>
    <div @click="onLogout" class="hand" style="margin-left: 20px">
      <Icon type="md-exit" class="header_right_alertMessExit" />
      退出
    </div>
  </div>
  <user-detail ref="userDetailRef" @edit-pwd="onEditPwd" />
  <download-model ref="downloadRef" />
  <pwd-tip @success="onTipSuccess" />
  <pwd-set ref="setRef" />
  <pwd-code ref="codeRef" @success="onCodeSuccess" />
</template>

<script setup>
  import { userStore } from '@/store/user'
  import { onMounted, ref, onUnmounted } from 'vue'
  import dt from '@dt/dt'
  import userDetail from './userDetail.vue'
  import downloadModel from './downloadModel.vue'
  // import { downloadStore } from '@/store/download'
  import mgr from '../biz/index.js'

  import pwdTip from '@/components/pwd/tip.vue'
  import pwdSet from '@/components/pwd/set.vue'
  import pwdCode from '@/components/pwd/code.vue'

  const [userDetailRef, downloadRef] = [ref(), ref()]
  const [setRef, codeRef] = [ref(), ref()]

  //退出登录
  function onLogout() {
    dt.ui.Modal.confirm({
      title: '退出',
      content: `您将要退出系统，请确认！`,
      onOk: () => {
        mgr.logout().then((res) => {
          userStore().logout()
          dt.ui.Message.success('退出成功')
        })
      }
    })
  }

  onMounted(() => {
    // downloadVerdictChange()
  })

  function onTipSuccess() {
    codeRef.value.show()
  }
  function onEditPwd() {
    codeRef.value.show()
  }
  function onCodeSuccess(phone) {
    setRef.value.show(phone)
  }
  function showUserDetail() {
    userDetailRef.value.show()
  }

  // //打开下载中心
  // function downloadShow() {
  //   downloadStore().showList()
  //   downloadRef.value.openList()
  //   hasUnread.value = 0
  //   mgr.downloadlUpdateStatus().then((res) => {
  //     hasUnread.value = 0
  //   })
  // }
  // //定时请求下载是否有任务
  // let hasUnread = ref(false)
  // let timeout = null

  // function downloadVerdictChange() {
  //   setTimeout(() => {
  //     mgr.downloadlVerdict().then((res) => {
  //       if (res.error != 0 || res.success != 0) {
  //         hasUnread.value = 1
  //       } else {
  //         hasUnread.value = 0
  //       }
  //     })
  //   }, 1000)
  //   clearTimeout(timeout)
  //   timeout = setTimeout(() => {
  //     downloadVerdictChange()
  //   }, 300000)
  // }
  // onUnmounted(() => {
  //   clearTimeout(timeout)
  // })
</script>

<style scoped lang="scss">
  .download-icon {
    display: inline-block;
    cursor: pointer;
    margin: 0 15px;
    font-weight: 700;
    font-size: 18px;
    line-height: 32px;

    :deep(.ivu-badge-dot) {
      top: 3px;
    }
  }
</style>
